<!-- configure home panels -->
<div id="confighome" class="easyui-window" title="Configure Home" data-options="modal:true,closed:true,resizable:true,iconCls:'icon-save'" style="width: 620px; height: 500px;">
	<div id="cnfigHmDesc">Use Configure Home to select Home Page general setting, panels, targets and pre/post travel criteria. For help configuring your Home Page,
	please call your local help desk.</div>
	<div id="fiveTabs" class="easyui-tabs" data-options="tabWidth:112" style="width: 500px; height: 500px; font-family: Arial;" fit="true">
		<div title="General" style="padding: 10px;">
			<p>Select your preferences for the soluction.</p>
			<div id="hmPg">
				<strong>Home Page:</strong> <span><input  id="showHmTab" type="checkbox" name="check" checked><label for="showHmTab">Show home tab</label></span><br /><br /><br />
				<strong>View period:</strong> <select><option value="volvo" selected="selected">YTD</option></select>
			</div>
			<div id="userLocal">
				<strong>User Local</strong><br/>
				<div id="lngTZN">
					Language:<select class="lng"><option value="English" selected="selected">English</option></select><br/>
					Time Zone: <select class="tzone"><option value="(GMT -7:00) Mountain Time (US & Canada)" selected="selected">(GMT -7:00) Mountain Time (US &amp; Canada)</option></select><br/>
					Number and Date Format: <select class="numberDateFt"><option value="English" selected="selected">English</option></select><br/>
				</div>
			</div>
<!-- 			<div id="spLine"></div>
			<div id="genlSvCancl">
				<input type="submit" value="Save">
				<input class="cnl" type="reset" value="Cancel">
			</div> -->
		</div>
		<div id="cnfHmPnl" class="checkbox" title="Panels">
			<p>Select Panels to design the content of your home page.</p>
			<div id="chkBoxGrp" style="">
				<div>
					<div><input id="check1" type="checkbox" cor="pnlsmy" name="check" value="check1" autocomplete="off" checked><label for="check1">Analyze Spend - Spend Summary</label></div>
					<input id="check2" type="checkbox" cor="pnlair" name="check" value="check2" autocomplete="off" checked><label for="check2">Analyze Spend - Air Spend</label>
				</div>
				<div class="bgcolor">
					<div><input id="check3" type="checkbox" cor="pnlcar" name="check" value="check3" autocomplete="off" checked><label for="check3">Analyze Spend - Car Spend</label></div>
					<input id="check4" type="checkbox" cor="pnlhotel" name="check" value="check4" autocomplete="off" checked><label for="check4">Analyze Spend - Hotel Spend</label>
				</div>
				<div>
					<div><input id="check5" type="checkbox" cor="pnlANA" name="check" value="check5" autocomplete="off" checked><label for="check5">Active News Alerts</label></div> 
					<input id="check6" type="checkbox" cor="pnlPlySts" name="check" value="check6" autocomplete="off" checked><label for="check6">Assess Policy - Status Indicators *</label>
				</div> 
				<div class="bgcolor">
					<div><input id="check7" type="checkbox" cor="pnlrail" name="check" value="check7" autocomplete="off" checked><label for="check7">Analyze Spend - Rail Spend</label></div>
					<input id="check8" type="checkbox" cor="pnltac" name="check" value="check8"autocomplete="off" checked><label for="check8">Manage Suppliers - Top Air Carriers</label>
				</div> 
				<div>
					<div><input id="check9" type="checkbox" cor="pnlthcit" name="check" value="check9" autocomplete="off" checked><label for="check9">Manage Suppliers - Top Hotel Cities</label></div>
					<input id="check10" type="checkbox" cor="pnlthc" name="check" value="check10" autocomplete="off" checked><label for="check10">Manage Suppliers - Top Hotel Chains</label>
				</div> 
				<div class="bgcolor">
					<div><input id="check11" type="checkbox" cor="pnlsavings" name="check" value="check11" autocomplete="off" checked><label for="check11">Analyze Spend - Policy Savings</label></div>
					<input id="check12" type="checkbox" cor="pnltrmp" name="check" value="check12" autocomplete="off" checked><label for="check12">Manage Suppliers - Top Rail Market Pairs</label>
				</div> 
				<div>
					<div><input id="check13" type="checkbox" cor="pnltamp" name="check" value="check13" autocomplete="off" checked><label for="check13">Manage Suppliers - Top Air Market Pairs</label></div>
					<input id="check14" type="checkbox" cor="pnlmss" name="check" value="check14" autocomplete="off" checked><label for="check14">Manage Suppliers - Air/Rail Market Share Status</label>
				</div> 
				<div class="bgcolor">
					<div><input id="check15" type="checkbox" cor="pnlrisk" name="check" value="check15" autocomplete="off" checked><label for="check15">Pre Travel - Risk Assessment(Pre Travel)</label></div>
					<input id="check16" type="checkbox" cor="pnlpts" name="check" value="check16" autocomplete="off" checked><label for="check16">Pre Travel - Savings Opportunity</label>
				</div> 
				<div>
					<div><input id="check17" type="checkbox" cor="pnltp" name="check" value="check17" autocomplete="off" checked><label for="check17">TrackPoint II(must subscribe to access)</label></div>
					<input id="check18" type="checkbox" cor="pnlauditor" name="check" value="check18" autocomplete="off" checked><label for="check18">Pre-Trip Auditor(must subscribe to access)</label>
				</div> 
			</div>
			<p style="clear: both;font-size: 11px;">*Panel requires that user-defined goals be set. Proceed to the target tab to define your program specific goals.</p>
		</div>
		
		<div title="Targets" style="padding: 10px">
			<p>Configure your indicators by entering the key information and target percentages below.</p>
			<div id="cnfHmTrgt">
				<div class="easyui-panel" title="<strong>Assess Policy - Status Indicators</strong>" style="width:562px;height:310px;" data-options="collapsible:true">
					<div id="assessPoly">
						<div class="asPolyHead">
							<span>Indicator</span>
							<span>Domestic / International</span>
							<span>Target</span>
						</div>
						<div class="asPolyBody">
							<div>
								<span><input type="checkbox" name="check" checked><label for="olAdp">Online Adoption</label></span>
								<span><select disabled="disabled"><option value="Total" selected="selected">Total</option></select></span>
								<span><input type="text" name="target" disabled="disabled">%</span>
							</div>
							<div>
								<span><input type="checkbox" name="check" checked><label for="fstClass">First Class</label></span>
								<span><select><option value="Total" selected="selected">Total</option></select></span>
								<span><input type="text" name="target">%</span>
							</div>
							<div>
								<span><input type="checkbox" name="check" checked><label for="bzClass">Business Class</label></span>
								<span><select><option value="Total" selected="selected">Total</option></select></span>
								<span><input type="text" name="target" style="width:50px;">%</span>
							</div>
							<div>
								<span><input type="checkbox" name="check" checked><label for="bzClass">Coach Class</label></span>
								<span><select><option value="Total" selected="selected">Total</option></select></span>
								<span><input type="text" name="target">%</span>
							</div>
							<div>
								<span><input type="checkbox" name="check" checked><label for="bzClass">0-3 Days Advance Purchase</label></span>
								<span><select><option value="Total" selected="selected">Total</option></select></span>
								<span><input type="text" name="target">%</span>
							</div>
							<div>
								<span><input type="checkbox" name="check" checked><label for="bzClass">4-6 Days Advance Purchase</label></span>
								<span><select><option value="Total" selected="selected">Total</option></select></span>
								<span><input type="text" name="target">%</span>
							</div>
							<div>
								<span><input type="checkbox" name="check" checked><label for="bzClass">7-13 Days Advance Purchase</label></span>
								<span><select><option value="Total" selected="selected">Total</option></select></span>
								<span><input type="text" name="target">%</span>
							</div>
							<div>
								<span><input type="checkbox" name="check" checked><label for="bzClass">14-20 Days Advance Purchase</label></span>
								<span><select><option value="Total" selected="selected">Total</option></select></span>
								<span><input type="text" name="target">%</span>
							</div>
						</div>
					</div>
				</div>
				<div id="mgSuppliers" class="easyui-panel" title="<strong>Manage Suppliers - Air/Rail Market Share Status</strong>" style="width:562px;height:270px;" data-options="collapsible:true">
					<div>
						<span><strong>Market Pair</strong>(e.g., ORD-LAX)</span><span><strong>Carrier Code</strong>(e.g., UA)</span><span><strong>Target</strong></span><span></span>
					</div>
					<div><span>ORD-LAX</span><span>UA</span><span>50%</span><span>X</span></div>
					<div><span>BOS-NTR</span><span>NH</span><span>10%</span><span>X</span></div>
					<div><span>GMP-HND</span><span>KE</span><span>25%</span><span>X</span></div>
					<div><span>PHX-SFO</span><span>SW</span><span>50%</span><span>X</span></div>
					<div><span>ORD-NRT</span><span>NH</span><span>20%</span><span>X</span></div>
					<div><span><input type="text" name="noName" size="15" align="middle"></span><span><input type="text" name="noName" size="12"></span><span><input type="text" name="noName" size="3">%</span>
					</div>
					<div><span>Add Market Pair / Carrier</span></div>
				</div>
				<div id="preTravelSOS" class="easyui-panel" title="<strong>Pre Travel - Savings Opportunity Summary</strong>" style="width:562px;height:290px;" data-options="collapsible:true">
					<div class="preTravelHead">
						<span>Indicator</span><span>Target</span>
					</div>
					<div class="preTravelBody">
						<div>
							<span><input id="check14" type="checkbox" cor="pnlmss" name="check" value="check14" autocomplete="off" checked><label for="check14">Preferred Air Carriers</label></span>
							<span><input type="text" name="noName" size="4">%</span>
						</div>
						<div>
							<span><input id="check14" type="checkbox" cor="pnlmss" name="check" value="check14" autocomplete="off" checked><label for="check14">Preferred Hotels</label></span>
							<span><input type="text" name="noName" size="4">%</span>
						</div>
						<div>
							<span><input id="check14" type="checkbox" cor="pnlmss" name="check" value="check14" autocomplete="off" checked><label for="check14">Preferred Car Rental Vendors</label></span>
							<span><input type="text" name="noName" size="4">%</span>
						</div>
						<div>
							<span><input id="check14" type="checkbox" cor="pnlmss" name="check" value="check14" autocomplete="off" checked><label for="check14">First Class</label></span>
							<span><input type="text" name="noName" size="4">%</span>
						</div>
						<div>
							<span><input id="check14" type="checkbox" cor="pnlmss" name="check" value="check14" autocomplete="off" checked><label for="check14">Business Class</label></span>
							<span><input type="text" name="noName" size="4">%</span>
						</div>
						<div>
							<span><input id="check14" type="checkbox" cor="pnlmss" name="check" value="check14" autocomplete="off" checked><label for="check14">Coach Class</label></span>
							<span><input type="text" name="noName" size="4">%</span>
						</div>
						<div>
							<span><input id="check14" type="checkbox" cor="pnlmss" name="check" value="check14" autocomplete="off" checked><label for="check14">Air / Rail Without Hotel</label></span>
							<span><input type="text" name="noName" size="4">%</span>
						</div>
						<div>
							<span><input id="check14" type="checkbox" cor="pnlmss" name="check" value="check14" autocomplete="off" checked><label for="check14">Savings Vs Low Fare</label></span>
							<span style="text-align: center; width: 50px;">NA</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div title="Post Travel" style="padding: 10px">
			<p>Customize the Post Travel inoformation presented in your Home panels by entering data criteria below.</p>
			<div class="easyui-panel" title="<strong>Basic Criteria</strong>" style="width:562px;height:320px;" data-options="collapsible:true">
					
			</div>
			<div class="easyui-panel" title="<strong>Advanced Filters</strong>" style="width:562px;height:320px;" data-options="collapsible:true">
					
			</div>
		</div>
		<div title="Pre travel" style="padding: 10px">
			<p>Customize the Pre Travel information presented in your Home panels by entering data criteria below.</p>
			<div class="easyui-panel" title="<strong>Basic Criteria</strong>" style="width:562px;height:320px;" data-options="collapsible:true">
					
			</div>
			<div class="easyui-panel" title="<strong>Advanced Filters</strong>" style="width:562px;height:320px;" data-options="collapsible:true">
					
			</div>
		</div>
	</div>
</div>
<!-- double click panels functionality -->
<div id="wSpendPanel" class="easyui-window" title="Spend Panels" data-options="modal:true,closed:true,resizable:false,iconCls:'icon-save'" style="width: 714px; height: 610px;">
	<div id="spendpanel" class="barChart2" style="width: 700px; height: 290px;"></div>
	<table id="dg" title="Spend Panels(Summary)" style="width: 700px; height: 270px" data-options="singleSelect:true,data:data" pagination="true">
		<thead>
			<tr>
				<th data-options="field:'itemid',width:150, align:'center'">Categories</th>
                <th data-options="field:'productid',width:139, align:'center'">Current YTD</th>
                <th data-options="field:'listprice',width:150,align:'right'">Comparison YTD</th>
                <th data-options="field:'unitcost',width:132,align:'right'">Average</th>
                <th data-options="field:'status',width:122,align:'center'">Status</th>
			</tr>
		</thead>
	</table>
	<script type="text/javascript" src="js/datagrid-filter.js"></script>
	<script type="text/javascript">
	var data = [
	            {"productid":"2","unitcost":2.50,"status":"P","listprice":3.00,"itemid":"Air"},
	            {"productid":"1","unitcost":3,"status":"P","listprice":5,"itemid":"Hotel"},
	            {"productid":"3","unitcost":5,"status":"N","listprice":7,"itemid":"Car"},
	            {"productid":"5.5","unitcost":3.75,"status":"P","listprice":2,"itemid":"Rail"}
	        ];
		$(function() {
			var dg = $('#dg').datagrid();
			dg.datagrid('enableFilter', [ {field : 'listprice', type : 'numberbox',
				options : {precision : 1},
				op : [ 'equal', 'notequal', 'less', 'greater' ]
			}, {
				field : 'unitcost', type : 'numberbox',
				options : {precision : 1},
				op : [ 'equal', 'notequal', 'less', 'greater' ]
			}, {
				field : 'status', type : 'combobox',
				options : {panelHeight : 'auto',
					data : [ {value : '', text : 'All'
					}, {value : 'P', text : 'P'
					}, {value : 'N', text : 'N'
					} ],
					onChange : function(value) {
						if (value == '') {
							dg.datagrid('removeFilterRule', 'status');
						} else {
							dg.datagrid('addFilterRule', {
								field : 'status',
								op : 'equal',
								value : value
							});
						}
						dg.datagrid('doFilter');
					}
				}
			} ]);
		});
	</script>
</div>